{extend name="layouts/cms"}
{block name='body-content'}
<div class="layui-inline layui-form">
    <form class="form-search" action="{:url('cms/users/index')}" method="get">
        <div class="layui-input-inline" style="width: 100px">
            <select name="user_type" lay-filter="CatType">
                <option value="0" {$user_type=="0"?"selected":""}>普通用户</option>
                <option value="1" {$user_type=="1"?"selected":""}>内部员工</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <input type="hidden" name="record_num" class="record_num" value="<?php echo $record_num; ?>">
            <input type="hidden" name="page_limit" class="page_limit" value="{$page_limit}">
            <input type="hidden" name="curr_page" class="curr_page" value="1">
            <input type="text" value="{$search}" name="str_search" placeholder="昵称/认证手机"
                   class="layui-input search_input">
        </div>
        <button class="layui-btn-warm btn-search-mz">
            <i class="layui-icon">&#xe615;</i>
        </button>
    </form>
</div>

<table class="layui-table table-body" lay-even="" lay-skin="row">
    <colgroup>
        <col width="5%">
        <col width="5%">
        <col width="5%">
        <col width="5%">
        <col width="10%">
        <col width="5%">
        <col width="5%">
        <col width="10%">
        <col width="5%">
    </colgroup>
    <thead>
    <tr>
        <th>编号</th>
        <th>头像</th>
        <th>昵称</th>
        <th>性别</th>
        <th>认证手机</th>
        <th>积分</th>
        <th>状态</th>
        <th>注册时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody class="tbody-users layui-form">
    {volist name="users" id="vo"}
    <tr class="tr-order-{$vo['id']}">
        <td>{$vo['id']}</td>
        <td><img class="user_avatar layui-nav-img" src="{$vo.user_avatar}"></td>
        <td><span class="span-FF9233">{$vo['nick_name']} </span></td>
        <td>{$vo['sex']}</td>
        <td><span class="span-FF9233">{$vo['auth_tel']} </span></td>
        <td><span class="span-7EC0EE">{$vo['integral']}</span><br></td>
        <td>{php} echo $vo['user_status_tip']{/php}</td>
        <td>{$vo['reg_time2']}</td>
        <td>
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-normal layui-btn-sm" title="状态审核"
                        onclick="checkToStatus('{$vo.id}')">
                    <i class="layui-icon">&#xe60e;</i>
                </button>
            </div>
        </td>
    </tr>
    {/volist}
    </tbody>
</table>

<div id="demo2-1"></div>
<link href="__CMS__/css/orders.css" rel="stylesheet">
{/block}

{block name='single-content'}
<script src="__CMS__/js/users.js"></script>
<script src="__CMS__/js/moZhang.js"></script>
<script>
    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage;
        var page_limit = $(".page_limit").val();
        var record_num = $(".record_num").val();
        laypage.render({
            elem: 'demo2-1'
            , limit: page_limit
            , count: record_num
            , layout: ['count', 'prev', 'page', 'next', 'refresh', 'skip']
            , jump: function (obj, first) {
                //obj包含了当前分页的所有参数
                //首次不执行
                if (!first) {
                    //layer.msg(obj.curr);
                    ajaxOpForPage(obj.curr);
                }
            }
            , theme: '#FF5722'
        });
    });

    layui.use(['form'], function () {
        var form = layui.form;
        form.on('switch(switchGoodsID)', function (data) {
            //开关是否开启，true或者false
            var checked = data.elem.checked;
            var okStatus = 0;
            if (checked) {
                okStatus = 1
            }
            //获取所需属性值
            var switch_goods_id = data.elem.attributes['switch_goods_id'].nodeValue;
            //TODO 此时进行ajax的服务器访问，如果返回数据正常，则进行后面代码的调用
            var toUrl = "{:url('cms/goods/ajaxPutaway')}";
            $.post(
                toUrl,
                {goods_id: switch_goods_id, okStatus: okStatus},
                function (result) {
                    if (result.status > 0) {
                        data.elem.checked = checked;
                        form.render();
                    } else {
                        //失败
                        data.elem.checked = !checked;
                        form.render();
                        layer.msg(result.message);
                    }
                }, "JSON");
        });
    });
</script>
<script>
    //进行售后状态的更改
    function checkToStatus(user_id) {
        layer.msg('请更新用户状态', {
            time: 5000 //不自动关闭
            ,area:[600]
            , shadeClose: true
            , btn: ['正常', '异常(可申诉)', '黑名单','【离开】']
            , yes: function () {
                ajaxUpdateUserStatus(user_id, 0,"正常")
            }, btn2: function () {
                ajaxUpdateUserStatus(user_id, 1,"异常")
            }, btn3: function () {
                ajaxUpdateUserStatus(user_id, 2,"黑名单")
            }
        });
    }

    /**
     * 审核状态  -1：已删除(审核未通过）  0：未审核 1：审核通过
     * ajax 进行服务请求修改审核状态
     */
    function ajaxUpdateUserStatus(user_id, user_status,updateText) {
        var toUrl = "{:url('cms/users/ajaxUpdateUserStatus')}";
        var postData = {user_id: user_id, 'user_status': user_status};
        $.post(
            toUrl,
            postData,
            function (res) {
                if(res.status == 1){
                    $(".span-user-status-"+user_id).html(updateText);
                }
                layer.msg(res.message);
            }, 'JSON'
        )
    }

    $(".btn-search-mz").on('click', function () {
        $(".form-search").submit();
    });

    //通过ajax 获取分页数据
    function ajaxOpForPage(curr_page) {
        var toUrl = "{:url('cms/users/ajaxOpForPage')}";
        $(".curr_page").val(curr_page);
        var postData = $(".form-search").serialize();
        ToAjaxOpForPageUsers(toUrl, postData);
    }
</script>
{/block}